<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>快捷跑腿 - 接单大厅</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
  <style>
    /* 全局样式 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    }
    
    body {
      background-color: #f3f4f6;
      color: #4b5563;
      padding-bottom: 70px; /* 为底部导航留出空间 */
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .page-container {
      display: none;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      padding: 24px;
      margin-bottom: 24px;
    }
    
    #order-hall {
      display: block; /* 默认显示订单页面 */
    }
    
    .section-title {
      font-size: 20px;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 16px;
    }
    
    /* 订单卡片样式（与热门订单完全一致） */
    .order-card {
      background: white;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      padding: 18px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      margin-bottom: 16px; /* 增加订单间距，提升可读性 */
      cursor: pointer;
    }
    
    .order-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(0,0,0,0.08);
      border-color: #3b82f6;
    }
    
    /* 按钮样式统一 */
    .btn-primary {
      background-color: #3b82f6;
      color: white;
      height: 44px;
      padding: 0 32px;
      border-radius: 8px;
      border: none;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
    }
    
    .btn-primary:hover {
      background-color: #2563eb;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    }
    
    .btn-accept {
      background-color: #3b82f6;
      color: white;
      height: 36px;
      padding: 0 20px;
      border-radius: 6px;
      border: none;
      font-weight: 500;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
      min-width: 80px;
    }
    
    .btn-accept:hover {
      background-color: #2563eb;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    }
    
    /* 筛选栏样式（新增，提升订单筛选体验） */
    .filter-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background-color: #f9fafb;
      border-radius: 8px;
      margin-bottom: 20px;
      overflow-x: auto; /* 适配小屏幕，横向滚动 */
      scrollbar-width: none; /* 隐藏滚动条（美观） */
    }
    
    .filter-bar::-webkit-scrollbar {
      display: none;
    }
    
    .filter-item {
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap; /* 防止文字换行 */
    }
    
    .filter-item.active {
      background-color: #3b82f6;
      color: white;
    }
    
    .filter-item:not(.active):hover {
      background-color: #efefef;
    }
    
    /* 底部导航（与首页保持一致） */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 12px 0 8px;
      background: white;
      border-top: 1px solid #e5e7eb;
      display: flex;
      justify-content: space-around;
      z-index: 100;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    }
    
    .nav-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      color: #9ca3af;
      font-size: 12px;
      padding: 4px 12px;
      border-radius: 8px;
      transition: all 0.2s;
    }
    
    .nav-link:hover, .nav-link.active {
      color: #3b82f6;
      background-color: #f0f9ff;
    }
    
    /* 搜索框（与首页保持一致） */
    .search-box {
      position: relative;
      margin-bottom: 20px;
    }
    
    .search-box input {
      width: 100%;
      padding: 12px 45px 12px 15px;
      border-radius: 25px;
      border: 1px solid #e5e7eb;
      font-size: 14px;
      transition: all 0.3s;
    }
    
    .search-box input:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
      outline: none;
    }
    
    .search-icon {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #6b7280;
    }
    
    /* 响应式调整（适配不同屏幕尺寸） */
    @media (max-width: 768px) {
      .container {
        padding: 15px;
      }
      
      .page-container {
        padding: 16px;
      }
      
      .order-card {
        padding: 14px;
        margin-bottom: 12px;
      }
      
      .filter-bar {
        gap: 8px;
        padding: 10px 12px;
      }
      
      .filter-item {
        padding: 5px 12px;
        font-size: 13px;
      }
    }
    
    @media (max-width: 480px) {
      .section-title {
        font-size: 18px;
      }
      
      .btn-accept {
        height: 32px;
        padding: 0 16px;
        font-size: 13px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 订单页面（接单大厅） -->
    <div id="order-hall" class="page-container">
    
      
      <!-- 搜索框（与首页一致） -->
      <div class="search-box">
        <input type="text" placeholder="搜索订单地址、类型或关键词...">
        <span class="search-icon iconify" data-icon="mdi:magnify"></span>
      </div>
      
      <!-- 订单筛选栏（新增，方便用户筛选订单） -->
      <div class="filter-bar">
        <div class="filter-item active">全部订单</div>
        <div class="filter-item">代取件</div>
        <div class="filter-item">代送达</div>
        <div class="filter-item">代购物</div>
        <div class="filter-item">代办事</div>
        <div class="filter-item">陪诊服务</div>
        <div class="filter-item">距离最近</div>
        <div class="filter-item">金额最高</div>
      </div>
      
      <!-- 订单列表（所有订单布局与热门订单一致） -->
      <div>
        <h2 class="section-title">可接订单（12）</h2>
        <div class="order-list">
          <!-- 订单1：代取件 -->
          <div class="order-card" data-target="order-detail">
            <div class="flex justify-between items-start mb-4">
              <div class="flex items-center gap-2">
                <span class="iconify text-blue-600 text-xl" data-icon="mdi:package-variant"></span>
                <span class="font-semibold text-gray-800">代取件</span>
              </div>
              <div class="flex items-center gap-1 text-gray-500 text-sm">
                <span class="iconify" data-icon="mdi:map-marker"></span>
                <span>3.2km</span>
              </div>
            </div>
            
            <div class="mb-4">
              <div class="flex items-start gap-2 mb-2">
                <span class="iconify text-green-500 mt-1" data-icon="mdi:map-marker-outline"></span>
                <div>
                  <p class="font-medium text-gray-800">取件：世纪联华超市（文一路店）</p>
                  <p class="text-sm text-gray-500 mt-0.5">浙江省杭州市西湖区文一路298号</p>
                </div>
              </div>
              <div class="flex items-start gap-2">
                <span class="iconify text-red-500 mt-1" data-icon="mdi:map-marker"></span>
                <div>
                  <p class="font-medium text-gray-800">送到：湖滨小区12幢301室</p>
                  <p class="text-sm text-gray-500 mt-0.5">预计15分钟路程 | 物品：日用品</p>
                </div>
              </div>
            </div>
            
            <div class="flex justify-between items-center pt-3 border-t border-gray-100">
              <div class="flex items-center gap-4">
                <div class="text-blue-600 font-bold text-xl">￥18</div>
                <span class="text-xs text-gray-400">发布于 10:23</span>
              </div>
              <button class="btn-accept">接单</button>
            </div>
          </div>
          
          <!-- 订单2：代购物 -->
          <div class="order-card" data-target="order-detail">
            <div class="flex justify-between items-start mb-4">
              <div class="flex items-center gap-2">
                <span class="iconify text-orange-500 text-xl" data-icon="mdi:cart"></span>
                <span class="font-semibold text-gray-800">代购物</span>
              </div>
              <div class="flex items-center gap-1 text-gray-500 text-sm">
                <span class="iconify" data-icon="mdi:map-marker"></span>
                <span>1.8km</span>
              </div>
            </div>
            
            <div class="mb-4">
              <div class="flex items-start gap-2 mb-2">
                <span class="iconify text-green-500 mt-1" data-icon="mdi:map-marker-outline"></span>
                <div>
                  <p class="font-medium text-gray-800">购买：盒马鲜生（武林广场店）</p>
                  <p class="text-sm text-gray-500 mt-0.5">浙江省杭州市拱墅区武林广场11号</p>
                </div>
              </div>
              <div class="flex items-start gap-2">
                <span class="iconify text-red-500 mt-1" data-icon="mdi:map-marker"></span>
                <div>
                  <p class="font-medium text-gray-800">送到：武林府5幢1502室</p>
                  <p class="text-sm text-gray-500 mt-0.5">预计20分钟路程 | 物品：海鲜（需冷藏）</p>
                </div>
              </div>
            </div>
            
            <div class="flex justify-between items-center pt-3 border-t border-gray-100">
              <div class="flex items-center gap-4">
                <div class="text-blue-600 font-bold text-xl">￥25</div>
                <span class="text-xs text-gray-400">发布于 10:15</span>
              </div>
              <button class="btn-accept">接单</button>
            </div>
          </div>
          
          <!-- 订单3：代办事 -->
          <div class="order-card" data-target="order-detail">
            <div class="flex justify-between items-start mb-4">
              <div class="flex items-center gap-2">
                <span class="iconify text-purple-500 text-xl" data-icon="mdi:file-document"></span>
                <span class="font-semibold text-gray-800">代办事</span>
              </div>
              <div class="flex items-center gap-1 text-gray-500 text-sm">
                <span class="iconify" data-icon="mdi:map-marker"></span>
                <span>5.6km</span>
              </div>
            </div>
            
            <div class="mb-4">
              <div class="flex items-start gap-2 mb-2">
                <span class="iconify text-green-500 mt-1" data-icon="mdi:map-marker-outline"></span>
                <div>
                  <p class="font-medium text-gray-800">办事：杭州市政务服务中心</p>
                  <p class="text-sm text-gray-500 mt-0.5">浙江省杭州市上城区解放东路18号</p>
                </div>
              </div>
              <div class="flex items-start gap-2">
                <span class="iconify text-red-500 mt-1" data-icon="mdi:map-marker"></span>
                <div>
                  <p class="font-medium text-gray-800">送到：钱江新城CBD写字楼B座</p>
                  <p class="text-sm text-gray-500 mt-0.5">预计30分钟路程 | 事项：取营业执照</p>
                </div>
              </div>
            </div>
            
            <div class="flex justify-between items-center pt-3 border-t border-gray-100">
              <div class="flex items-center gap-4">
                <div class="text-blue-600 font-bold text-xl">￥50</div>
                <span class="text-xs text-gray-400">发布于 09:45</span>
              </div>
              <button class="btn-accept">接单</button>
            </div>
          </div>
          
          <!-- 订单4：陪诊服务 -->
          <div class="order-card" data-target="order-detail">
            <div class="flex justify-between items-start mb-4">
              <div class="flex items-center gap-2">
                <span class="iconify text-pink-500 text-xl" data-icon="mdi:doctor"></span>
                <span class="font-semibold text-gray-800">陪诊服务</span>
              </div>
              <div class="flex items-center gap-1 text-gray-500 text-sm">
                <span class="iconify" data-icon="mdi:map-marker"></span>
                <span>4.3km</span>
              </div>
            </div>
            
            <div class="mb-4">
              <div class="flex items-start gap-2 mb-2">
                <span class="iconify text-green-500 mt-1" data-icon="mdi:map-marker-outline"></span>
                <div>
                  <p class="font-medium text-gray-800">地点：浙江省人民医院（朝晖院区）</p>
                  <p class="text-sm text-gray-500 mt-0.5">浙江省杭州市拱墅区朝晖一区58号</p>
                </div>
              </div>
              <div class="flex items-start gap-2">
                <span class="iconify text-red-500 mt-1" data-icon="mdi:clock"></span>
                <div>
                  <p class="font-medium text-gray-800">时间：今天下午14:00</p>
                  <p class="text-sm text-gray-500 mt-0.5">服务内容：陪同挂号、取药 | 客户：老人</p>
                </div>
              </div>
            </div>
            
            <div class="flex justify-between items-center pt-3 border-t border-gray-100">
              <div class="flex items-center gap-4">
                <div class="text-blue-600 font-bold text-xl">￥80</div>
                <span class="text-xs text-gray-400">发布于 08:30</span>
              </div>
              <button class="btn-accept">接单</button>
            </div>
          </div>
          
          <!-- 订单5：代送达 -->
          <div class="order-card" data-target="order-detail">
            <div class="flex justify-between items-start mb-4">
              <div class="flex items-center gap-2">
                <span class="iconify text-green-500 text-xl" data-icon="mdi:motorbike"></span>
                <span class="font-semibold text-gray-800">代送达</span>
              </div>
              <div class="flex items-center gap-1 text-gray-500 text-sm">
                <span class="iconify" data-icon="mdi:map-marker"></span>
                <span>2.7km</span>
              </div>
            </div>
            
            <div class="mb-4">
              <div class="flex items-start gap-2 mb-2">
                <span class="iconify text-green-500 mt-1" data-icon="mdi:map-marker-outline"></span>
                <div>
                  <p class="font-medium text-gray-800">取件：星巴克（万象城店）</p>
                  <p class="text-sm text-gray-500 mt-0.5">浙江省杭州市江干区富春路701号</p>
                </div>
              </div>
              <div class="flex items-start gap-2">
                <span class="iconify text-red-500 mt-1" data-icon="mdi:map-marker"></span>
                <div>
                  <p class="font-medium text-gray-800">送到：来福士广场T2写字楼23楼</p>
                  <p class="text-sm text-gray-500 mt-0.5">预计25分钟路程 | 物品：咖啡（热饮）</p>
                </div>
              </div>
            </div>
            
            <div class="flex justify-between items-center pt-3 border-t border-gray-100">
              <div class="flex items-center gap-4">
                <div class="text-blue-600 font-bold text-xl">￥22</div>
                <span class="text-xs text-gray-400">发布于 10:50</span>
              </div>
              <button class="btn-accept">接单</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 其他页面（保持与首页结构一致，确保导航切换正常） -->
    <div id="home-page" class="page-container">
      <p>首页（点击底部导航可切换）</p>
    </div>
    
    <div id="publish-page" class="page-container">
      <p>发布需求页面（点击底部导航可切换）</p>
    </div>
    
    <div id="order-detail" class="page-container">
      <p>订单详情页面（点击订单卡片可进入）</p>
    </div>
  </div>
  
  <!-- 底部导航栏（与首页完全一致，确保体验统一） -->
  <div class="bottom-nav">
    <a href="./index.html" class="nav-link">
      <span class="iconify text-xl" data-icon="mdi:home-outline"></span>
      <span>首页</span>
    </a>
    <a href="./order.html" class="nav-link active">
      <span class="iconify text-xl" data-icon="mdi:clipboard-list-outline"></span>
      <span>订单</span>
    </a>
    <a href="./message.html" class="nav-link">
      <span class="iconify text-xl" data-icon="mdi:message-outline"></span>
      <span>消息</span>
    </a>
    <a href="./me.html" class="nav-link">
      <span class="iconify text-xl" data-icon="mdi:account-outline"></span>
      <span>我的</span>
    </a>
  </div>

  <script>
    // 页面逻辑（保持与首页一致，确保交互统一）
    document.addEventListener('DOMContentLoaded', function() {
      const pages = document.querySelectorAll('.page-container');
      const navLinks = document.querySelectorAll('.nav-link');
      const filterItems = document.querySelectorAll('.filter-item');
      
      // 1. 页面导航切换
      navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          const targetId = this.getAttribute('data-target');
          
          // 隐藏所有页面
          pages.forEach(page => {
            page.style.display = 'none';
          });
          
          // 显示目标页面
          if (targetId) {
            document.getElementById(targetId).style.display = 'block';
          }
          
          // 更新导航激活状态
          navLinks.forEach(nav => {
            nav.classList.remove('active');
          });
          this.classList.add('active');
        });
      });
      
      // 2. 订单筛选切换
      filterItems.forEach(item => {
        item.addEventListener('click', function() {
          // 更新筛选激活状态
          filterItems.forEach(filter => {
            filter.classList.remove('active');
          });
          this.classList.add('active');
          
          // 实际项目中可在此处添加筛选逻辑（如按类型/距离/金额筛选订单）
          const filterType = this.textContent;
          console.log(`当前筛选类型：${filterType}`);
        });
      });
      
      // 3. 接单按钮交互
      document.querySelectorAll('.btn-accept').forEach(btn => {
        btn.addEventListener('click', function() {
          if (confirm('确定要接此订单吗？接单后请及时联系客户~')) {
            alert('接单成功！请前往「我的订单」查看详情');
            // 实际项目中可在此处添加订单状态更新逻辑
          }
        });
      });
      
      // 4. 订单卡片点击（进入详情页）
      document.querySelectorAll('.order-card').forEach(card => {
        card.addEventListener('click', function(e) {
          // 避免点击“接单按钮”时触发卡片跳转
          if (!e.target.closest('.btn-accept')) {
            const targetId = this.getAttribute('data-target');
            if (targetId) {
              // 隐藏所有页面
              pages.forEach(page => {
                page.style.display = 'none';
              });
              // 显示订单详情页
              document.getElementById(targetId).style.display = 'block';
            }
          }
        });
      });
    });
  </script>
</body>
</html>